<template>
	<view v-if="userInfo" class="wander-container init-page" :class="themeType==='light'?'bgc-deep-light':'bgc-deep'">
		<!-- #ifndef MP-WEIXIN -->
		<myuni-topbar :themeType='themeType'>
		  <template v-slot:title>
			<text>每日推荐</text>
		  </template>
		</myuni-topbar>
		<!-- #endif -->
		<view class="main-list">
			<myuni-playlist :playlist="dailySongs" :desc="recommendReasons" :id="id" @emitItem="getSong" :recommend="true"></myuni-playlist>
		</view>
		<!-- recommend-new-song end -->
		<myuni-player :currntSong="currntSong" @emitChangeSong="ChangeSong"></myuni-player>
		<!-- aside-start -->
	</view>
</template>

<script>
	import { mapState } from 'vuex';
export default{
	data(){
		return {
			id:null,
			recommendReasons:[],
			dailySongs:[],
			currntSong:{},
			single:true
		}
	},
	onLoad(option) {
		if(!this.userInfo){
			uni.navigateTo({
				url:"/pages/login/login"
			})
		}
		this.id = option.id
		this.initData()
		if(uni.getStorageSync('music').url){
			var music = uni.getStorageSync('music')
			this.currntSong = music
		}
	},
	onShow() {
		if(!this.userInfo){
			uni.navigateTo({
				url:"/pages/login/login"
			})
		}
	},
	computed:{
		...mapState(['themeType','cookie','userInfo'])
	},
	methods:{
		initData(){
			this.request({
				url:'/recommend/songs?cookie='+this.cookie
			}).then(res=>{
				this.dailySongs=res.data.dailySongs
				this.recommendReasons=res.data.recommendReasons.map(val=>val.reason)
				uni.setStorageSync('playlist',this.dailySongs)
			})
		},
	    getSong(item){
			const {picUrl,name}=item.al
			const {name:singer,id:singerId}=item.ar
			this.request({
				url:'/song/url?id='+item.id
			}).then(res=>{
				uni.setStorageSync('music',{id:res.data[0].id,picUrl,name,singer,singerId,url:res.data[0].url,playing:true,index:item.index,single:this.single,type:'playlist'})
				this.currntSong = uni.getStorageSync('music')
			})
		},
		ChangeSong(isNext){
			let playlist=uni.getStorageSync('playlist')
			if(isNext){
				var index
				this.currntSong.index===playlist.length-1?index=0:index=this.currntSong.index+1
			}else{
				var index
				this.currntSong.index===0?index=playlist.length-1:index=this.currntSong.index-1
			}
			playlist[index].index=index
			this.getSong(playlist[index])
		},
		open(){
		        // 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
		        this.$refs.popup.open('top')
		}
	}
}
</script>

<style lang="scss" scoped>
// page{
// 	background: linear-gradient(to bottom,#2a3740,#3e4a55,#435060);
// }
.wander-container{
	.main-list{
		// margin-top: 100rpx;
	}
	::v-deep.player-container{
		bottom: 0;
	}
}
</style>
